<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>

<script>
	window.onload=function()
	{
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle='#ff0000';
		ctx.strokeRect(100,100,300,300);
		ctx.fillStyle='#ff9999';
		ctx.fillRect(200,200,100,100);
		
		ctx.fillStyle='#ff6666';
		var color=new Array('#ff0000','#ff8050','#ffff00','#00ff00','#0000ff','#0000aa','#a000ff','#ffff00','#00ffff','#000000');
		var j=0;
		for(i=10; i<500; i=i+60)
		{
			ctx.fillStyle=color[j];
			ctx.fillRect(i,450,55,55);
			j++;
		}
	}
</script>

</head>
<body>
	<canvas id='mycanvas' width='600px' height='500px'></canvas>
</body>
</html>